<template>
  <div class="app-container">
    <div style="margin-bottom: 4px;">
      渠道：
      <el-select v-model="agentCode" @change="agentChange()">
        <el-option v-for="item in agentList" :key="item.agentCode" :value="item.agentCode" :label="item.parName+'['+item.agentCode+']'"></el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="handleAdd()">编辑</el-button>
    </div>
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="套餐名称">
        <template slot-scope="scope">
          {{scope.row.mealName}}
        </template>
      </el-table-column>
      <el-table-column label="套餐类型">
        <template slot-scope="scope">
          <span>{{scope.row.mealType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="保险范围">
        <template slot-scope="scope">
          <span>{{scope.row.mealScope}}</span>
        </template>
      </el-table-column>
      <el-table-column label="套餐所属保险公司">
        <template slot-scope="scope">
          <span>{{scope.row.mealBelong}}</span>
        </template>
      </el-table-column>
      <el-table-column label="适用车型">
        <template slot-scope="scope">
          <span>{{scope.row.country}}</span>
        </template>
      </el-table-column>
      <el-table-column label="新车标志">
        <template slot-scope="scope">
          <span v-if="scope.row.isNew == 0">旧车、二手车</span>
          <span v-else-if="scope.row.isNew == 1">新车</span>
          <span v-else-if="scope.row.isNew == 2">全部</span>
        </template>
      </el-table-column>
      <el-table-column label="范围">
        <template slot-scope="scope">
          <span>{{'车龄：'+scope.row.carAgeRange + '\n 里程：'+scope.row.mileageRange}}</span>
        </template>
      </el-table-column>
      <el-table-column label="限额">
        <template slot-scope="scope">
          <span>{{scope.row.maxPrice}}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" width="80%" top="20px">
      <el-table ref="setMealTable" :data="listSetMeal" v-loading="listLoading" height="600" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="套餐名称" width="180">
          <template slot-scope="scope">
            {{scope.row.mealName}}
          </template>
        </el-table-column>
        <el-table-column label="套餐类型">
          <template slot-scope="scope">
            <span>{{scope.row.mealType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="保险范围">
          <template slot-scope="scope">
            <span>{{scope.row.mealScope}}</span>
          </template>
        </el-table-column>
        <el-table-column label="套餐所属保险公司" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.mealBelong}}</span>
          </template>
        </el-table-column>
        <el-table-column label="适用车型">
          <template slot-scope="scope">
            <span>{{scope.row.country}}</span>
          </template>
        </el-table-column>
        <el-table-column label="新车标志">
          <template slot-scope="scope">
            <span v-if="scope.row.isNew == 0">旧车、二手车</span>
            <span v-else-if="scope.row.isNew == 1">新车</span>
            <span v-else-if="scope.row.isNew == 2">全部</span>
          </template>
        </el-table-column>
        <el-table-column label="范围">
          <template slot-scope="scope">
            <span>{{scope.row.carAgeRange + scope.row.mileageRange}}</span>
          </template>
        </el-table-column>
        <el-table-column label="限额">
          <template slot-scope="scope">
            <span>{{scope.row.maxPrice}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { productsApi } from '@/api/products'

  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        codeDisabled: true,
        agentList: [], // 渠道选择框
        agentCode: '', // 渠道选中数据
        listSetMeal: []
      }
    },
    filters: {
    },
    created() {
      this.fetchSetMeal()
      this.fatchSelectDate()
    },
    methods: {
      fetchSetMeal() {
        productsApi.getSetMeal().then(response => {
          console.log(response)
          this.listSetMeal = response.data
        })
      },
      fatchSelectDate() {
        productsApi.getAgents().then(response => {
          console.log(response)
          this.agentList = response.data
          if (response.data.length > 0) {
            this.agentCode = response.data[0].agentCode
            this.fetchData(response.data[0].agentCode)
          }
        })
      },
      fetchData(agentCode) {
        this.listLoading = true
        productsApi.getProducts(agentCode).then(response => {
          console.log(response)
          this.list = response.data
          this.listLoading = false
        })
      },
      agentChange(item) {
        this.fetchData(this.agentCode)
      },
      handleAdd() {
        this.codeDisabled = false
        this.dialogFormTitle = '编辑'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.setMealTable.clearSelection()
          this.list.forEach(row => {
            // console.log(row)
            for (let i = 0; i < this.listSetMeal.length; i++) {
              if (row.id === this.listSetMeal[i].id) {
                this.$refs.setMealTable.toggleRowSelection(this.listSetMeal[i])
                break
              }
            }
          })
        })
      },
      submit() {
        console.log(this.list)
        console.log(this.$refs.setMealTable.selection)
        const oldList = JSON.parse(JSON.stringify(this.list))
        let addSetMealId = ''
        let delProductId = ''
        const selection = this.$refs.setMealTable.selection
        for (let i = 0; i < selection.length; i++) {
          let ifAdd = true
          for (let j = 0; j < oldList.length; j++) {
            if (selection[i].id === oldList[j].id) {
              oldList.splice(j, 1)
              ifAdd = false
              break
            }
          }
          if (ifAdd) {
            addSetMealId += selection[i].id + ','
          }
        }
        for (let i = 0; i < oldList.length; i++) {
          delProductId += oldList[i].id + ','
        }
        if (addSetMealId.length > 0) {
          addSetMealId = addSetMealId.substring(0, addSetMealId.length - 1)
        }
        if (delProductId.length > 0) {
          delProductId = delProductId.substring(0, delProductId.length - 1)
        }

        let agentId = null
        for (let i = 0; i < this.agentList.length; i++) {
          if (this.agentList[i].agentCode === this.agentCode) {
            agentId = this.agentList[i].id
            break
          }
        }
        const data = {
          agentId: agentId,
          agentCode: this.agentCode,
          addSetMealId: addSetMealId,
          delProductId: delProductId
        }
        console.log(data)
        productsApi.updateProducts(data).then(response => {
          console.log(response)
          this.dialogFormVisible = false
          this.fetchData(this.agentCode)
        })
      }
    }
  }
</script>

